packages/react-form/tests/createFormHook.test-d.tsx (1)

993-1021: The chaining type test never proves ThirdField survived the second extension.

This case creates ThirdField, but the assertions still only cover Test and ExtendedField, then stop at expectTypeOf(doublyExtendedForm.AppField).toBeFunction(). A regression where the second extendForm drops the new key would still pass.

Suggested fix

-      const { useAppForm: useDoublyExtended } = baseHook
+      const {
+        useAppForm: useDoublyExtended,
+        withForm: withDoublyExtendedForm,
+      } = baseHook
         .extendForm({ fieldComponents: { ExtendedField } })
         .extendForm({ fieldComponents: { ThirdField } })
 
-      withExtendedForm({
+      withDoublyExtendedForm({
         defaultValues: { name: '' },
         render: ({ form }) => {
           return (
             <form.AppField name="name">
               {(field) => {
                 expectTypeOf(field.Test).toBeFunction()
                 expectTypeOf(field.ExtendedField).toBeFunction()
+                expectTypeOf(field.ThirdField).toBeFunction()
                 return null
               }}
             </form.AppField>
           )
         },
       })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/react-form/tests/createFormHook.test-d.tsx` around lines 993 - 1021,
The test never asserts that ThirdField survived the second extendForm call;
update the test around useDoublyExtended/withExtendedForm to assert ThirdField
is present — add expectTypeOf(field.ThirdField).toBeFunction() inside the render
callback (alongside the existing Test and ExtendedField checks) and also assert
the doublyExtendedForm exposes the extended field (e.g., an assertion that the
useDoublyExtended result exposes ThirdField on AppField or the equivalent
exported shape) so the chaining regression would fail if the second extension
drops the key.

examples/react/composition/index.html (1)

9-9: Title doesn't match the example name.

The title says "Simple Example App" but this is the composition example. Consider updating to reflect the actual example purpose.

-    <title>TanStack Form React Simple Example App</title>
+    <title>TanStack Form React Composition Example App</title>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/react/composition/index.html` at line 9, Update the HTML <title>
element to reflect this is the "Composition" example rather than "Simple Example
App": change the title text content inside the <title> tag (currently "TanStack
Form React Simple Example App") to something like "TanStack Form React
Composition Example" so it accurately describes this example page.

examples/react/composition/src/index.tsx (2)

43-48: Async validator returns false instead of undefined when valid.

When value.includes('error') is false, the && short-circuit returns false. While TanStack Form may handle this, explicitly returning undefined for valid state is clearer and more conventional.

             onChangeAsync: async ({ value }) => {
               await new Promise((resolve) => setTimeout(resolve, 1000))
-              return (
-                value.includes('error') && 'No "error" allowed in first name'
-              )
+              return value.includes('error')
+                ? 'No "error" allowed in first name'
+                : undefined
             },

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/react/composition/src/index.tsx` around lines 43 - 48, The async
validator onChangeAsync currently returns the string error when
value.includes('error') is true but returns false when valid due to the &&
expression; update the onChangeAsync implementation (the async validator
function) to explicitly return undefined for valid input instead of false—e.g.,
replace the short-circuit expression with a conditional (ternary or if) that
returns 'No "error" allowed in first name' when value.includes('error') is true
and undefined otherwise.

---

54-56: Consider using a distinct label for the lastName field.

Both fields currently display "last name". The second one is correct, but you may want to capitalize it consistently (e.g., "Last Name").

-          {(f) => <f.TextField label="last name" />}
+          {(f) => <f.TextField label="Last Name" />}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/react/composition/src/index.tsx` around lines 54 - 56, The lastName
field's visible label is not distinct/capitalized; update the form.AppField for
name="lastName" to use a proper, distinct label (e.g., change the f.TextField
label prop to "Last Name") and verify the other field (form.AppField
name="firstName") uses "First Name" so both fields are correctly labeled and
consistently capitalized; look for usages of form.AppField and the f.TextField
label prop to make this change.

examples/react/composition/src/AppForm/AppForm.tsx (1)

16-21: Consider exporting extendForm for downstream composition.

Given this PR introduces form composition capabilities via extendForm, you might want to export it alongside useAppForm so downstream consumers can extend this form with additional components.

-const { useAppForm } = createFormHook({
+const { useAppForm, extendForm } = createFormHook({
   fieldContext,
   formContext,
   fieldComponents: { TextField: TextField },
   formComponents: { SubmitButton },
 })
+
+export { extendForm }

Also, minor: TextField: TextField can use object shorthand: TextField.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/react/composition/src/AppForm/AppForm.tsx` around lines 16 - 21, The
export currently only exposes useAppForm from createFormHook; update the
destructuring returned by createFormHook to also export extendForm so downstream
modules can compose/extend the form (referencing createFormHook, useAppForm,
extendForm), and simplify the fieldComponents object by using shorthand for
TextField (replace TextField: TextField with TextField) while keeping
SubmitButton in formComponents.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes